<template>
	<view class="coupon-page">
		<view class="coupon-list">
			<view class="coupon-card" v-for="item in couponList" :key="item.coupon_id">
				<view class="coupon-main-row">
					<view class="coupon-info-col">
						<view class="coupon-title">{{ item.coupon_name }}</view>
						<view class="coupon-condition">
							{{ item.coupon_name }}
						</view>
						<view class="coupon-date">有效期至{{ item.deadline_time }}</view>
						<view class="coupon-status" v-if="item.status !== '0'">
							{{ item.status === '1' ? '已使用' : item.status === '2' ? '已过期' : '' }}
						</view>
					</view>
					<view class="coupon-value-btn-col">
						<view class="coupon-value">
							<text class="yuan">优惠券</text>
						</view>
						<button
							class="use-btn"
							@tap="handleUse(item)"
						>
							去使用
						</button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { couponApi } from '../../api/index'

// 优惠券列表
const couponList = ref([])

// 获取我的优惠券
const getMyCoupons = async () => {
	try {
		const token = uni.getStorageSync('token')
		const res = await couponApi.getCouponListByUserId(token)
		if (res.code === 200) {
			console.log('优惠券原始数据:', res.data)
			// 只过滤未过期的优惠券
			const validCoupons = res.data.filter(item => {
				const now = new Date().getTime()
				const deadline = new Date(item.deadlineTime).getTime()
				return deadline > now // 只要没过期就显示
			})
			
			couponList.value = validCoupons.map(item => {
				console.log('单个优惠券数据:', item)
				
				// 处理折扣值和金额
				let discount = 0
				let reduceAmount = 0
				let minAmount = 0
				
				if (item.couponType === '0') {
					// 折扣券
					discount = item.discount ? parseFloat(item.discount) : 0
					console.log('折扣券折扣值:', discount)
				} else {
					// 满减券
					reduceAmount = item.reduceAmount ? parseFloat(item.reduceAmount) : 0
					minAmount = item.minAmount ? parseFloat(item.minAmount) : 0
					console.log('满减券金额:', { reduceAmount, minAmount })
				}
				
				// 确保所有数值都是有效的数字
				discount = isNaN(discount) ? 0 : discount
				reduceAmount = isNaN(reduceAmount) ? 0 : reduceAmount
				minAmount = isNaN(minAmount) ? 0 : minAmount
				
				return {
					coupon_id: item.couponId,
					coupon_name: item.couponName,
					coupon_type: item.couponType === '0' ? 0 : 1,
					discount: discount,
					min_amount: minAmount,
					reduce_amount: reduceAmount,
					deadline_time: item.deadlineTime,
					status: item.couponStatus
				}
			})
		}
	} catch (error) {
		console.error('获取优惠券列表失败:', error)
		uni.showToast({
			title: '获取优惠券列表失败',
			icon: 'none'
		})
	}
}

const handleUse = (item) => {
	if (item.status === '1') {
		uni.showToast({ title: '优惠券已使用', icon: 'none' })
		return
	}
	if (item.status === '2') {
		uni.showToast({ title: '优惠券已过期', icon: 'none' })
		return
	}
	
	// 跳转到点餐页面
	uni.switchTab({
		url: '/pages/order/index'
	})
}

onMounted(() => {
	getMyCoupons()
})

// 页面显示时重新获取优惠券列表
defineExpose({
	onShow() {
		getMyCoupons()
	}
})
</script>

<style lang="scss" scoped>
.coupon-page {
	min-height: 100vh;
	background: #f5f5f5;
	padding: 0 0 32rpx 0;
}
.coupon-list {
	display: flex;
	flex-direction: column;
	gap: 24rpx;
	margin: 0 16rpx;
	padding: 24rpx 0 40rpx 0;
}
.coupon-card {
	background: #fff;
	border-radius: 18rpx;
	box-shadow: 0 2rpx 12rpx rgba(44, 62, 80, 0.08);
	display: flex;
	flex-direction: column;
}
.coupon-main-row {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	padding: 28rpx 20rpx 20rpx 24rpx;
}
.coupon-info-col {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.coupon-title {
	font-size: 30rpx;
	color: #222;
	font-weight: 600;
	margin-bottom: 10rpx;
}
.coupon-condition {
	font-size: 24rpx;
	color: #888;
	margin-bottom: 8rpx;
}
.coupon-date {
	font-size: 22rpx;
	color: #bbb;
	margin-top: 8rpx;
}
.coupon-value-btn-col {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	justify-content: center;
	min-width: 120rpx;
}
.coupon-value {
	font-size: 40rpx;
	color: #2196f3;
	font-weight: bold;
	margin-bottom: 12rpx;
	.yuan {
		font-size: 24rpx;
		margin-right: 2rpx;
	}
}
.use-btn {
	background: #2196f3;
	color: #fff;
	font-size: 24rpx;
	border-radius: 32rpx;
	border: none;
	padding: 0 36rpx;
	height: 56rpx;
	line-height: 56rpx;
	font-weight: 500;
	box-shadow: none;
	margin-top: 0;
	margin-bottom: 0;
	transition: background 0.2s;
}
.use-btn:active {
	background: #1976d2;
}
.use-btn:disabled {
	background: #cfd8dc;
	color: #fff;
}
.code-btn {
	background: #42a5f5;
}
.coupon-status {
	font-size: 24rpx;
	color: #ff6b6b;
	margin-top: 8rpx;
}

.use-btn.disabled {
	background: #cfd8dc;
	color: #fff;
}
</style>
